<html>
<head>
<script type="text/javascript" src="htmltable_export/tableExport.js"></script>
<script type="text/javascript" src="htmltable_export/jquery.base64.js"></script>
<!--<script type="text/javascript" src="htmltable_export/html2canvas.js"></script>-->
<script type="text/javascript" src="htmltable_export/jspdf/libs/sprintf.js"></script>
<script type="text/javascript" src="htmltable_export/jspdf/jspdf.js"></script>
<script type="text/javascript" src="htmltable_export/jspdf/libs/base64.js"></script>
<style>
table {
  border-collapse: collapse;
  border-spacing: none;
  }

thead th {
  background-color: #F7BE81;
  font-size: 12px;
  font-family: sans-serif;
  border:none;
  }

tbody td {
  font-size: 12px;
}


tr td:first-child,
tr th:first-child {
      border-top-left-radius: 6px;
	  border-bottom-left-radius: 6px;
}

tr td:last-child,
tr th:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
</style>
<!-- 
 <script>
 $(function () {
                $('#datepicker1').datepicker();
				$('#datepicker2').datepicker();				
            });
			</script> -->

<!--<div> <div ng-app="myApp" ng-controller="ListtranCtrl">-->
<!--<script data-require="underscore.js@1.5.1" data-semver="1.5.1" src="//cdn.jsdelivr.net/underscorejs/1.5.1/underscore-min.js"></script> -->
   <h3>Net Rate MIS</h3>
  <!--  <script>


var startDate = new Date('01/01/2012');
var FromEndDate = new Date();
var ToEndDate = new Date();

ToEndDate.setDate(ToEndDate.getDate()+365);

$('.from_date').datepicker({
    
    weekStart: 1,
    startDate: '01/01/2012',
    endDate: FromEndDate, 
    autoclose: true
})
    .on('changeDate', function(selected){
        startDate = new Date(selected.date.valueOf());
        startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
        $('.to_date').datepicker('setStartDate', startDate);
    }); 
$('.to_date')
    .datepicker({
        
        weekStart: 1,
        startDate: startDate,
        endDate: ToEndDate,
        autoclose: true
    })
    .on('changeDate', function(selected){
        FromEndDate = new Date(selected.date.valueOf());
        FromEndDate.setDate(FromEndDate.getDate(new Date(selected.date.valueOf())));
        $('.from_date').datepicker('setEndDate', FromEndDate);
    });

  
});
</script>

   <div class="bfh-datepicker" data-min="01/15/2013" data-max="today" data-close="false">
</div>

<div class="bfh-datepicker" data-format="y-m-d" data-date="today">
</div> -->
</head>
<body>
    <!--<tt> From Date:  <input type="date" id="datepicker1" name="fromdate" ng-model="fromdt" ng-change="dfilter(fromdt,todt,traninvalidmast)"></tt> 
   <tt> To Date:     <input type="date" id="datepicker2" name="todate" ng-model="todt" ng-change="dfilter(fromdt,todt,traninvalidmast)"></tt>-->
   <tt> From Date:  <input type="date" id="datepicker1" name="fromdate" ng-model="fromdt" /></tt> 
   <tt> To Date:     <input type="date" id="datepicker2" name="todate" ng-model="todt" /></tt>
	<button style="margin-bottom:10px;" class="btn btn-primary" data-loading-text="Loading..." type="button" ng-click="dfilter(fromdt,todt)">
		<b >Search</b>
	</button>   
	<!--<input type="button" class="btn btn-success" value="Filter" ng-click="dfilter(fromdt,todt,traninvalidmast)"/>-->
	<br/>
    <input type="text" ng-model="name" class="search-query" placeholder="Search"> 
	<!--<input type="button" class="btn btn-info pull-right" value="Clear" ng-click="cancel()"/><br/> -->
      <!--<button href="#/updttrandata/{{checkboxes.items}}"ng-click="updttrandata({{checkboxes.items}})" class="btn btn-success">Approve</button> 
      <a class="btn btn-success pull-right" href="#/updttrandata/{{checkboxes.items}}" ng-click="updttrandata({{checkboxes.items}})">Approve</a>-->   
				<span class="btn-group">
							<button class="btn btn-warning btn-sm dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bars"></i> <b>
							&dArr; Export Table Data</b></button>
							<ul class="dropdown-menu " role="menu">									
								<li><a href="#" onClick ="$('#tbl').tableExport({type:'xml',escape:'false'});"> <img src='htmltable_export/icons/xml.png' width='24px'> XML</a></li>	
								<li><a href="#" onClick ="$('#tbl').tableExport({type:'txt',escape:'false'});"> <img src='htmltable_export/icons/txt.png' width='24px'> Text</a></li>
								<li class="divider"></li>
								
								<li><a href="#" onClick ="$('#tbl').tableExport({type:'csv',escape:'false'});"> <img src='htmltable_export/icons/csv.png' width='24px'> CSV</a></li>							
								<li><a href="#" onClick ="$('#tbl').tableExport({type:'excel',escape:'false'});"> <img src='htmltable_export/icons/xls.png' width='24px'> Excel</a></li>
								
								
								<li class="divider"></li>
								<li><a href="#" onClick ="$('#tbl').tableExport({type:'doc',escape:'false'});"> <img src='htmltable_export/icons/word.png' width='24px'> Word</a></li>
								<li><a href="#" onClick ="$('#tbl').tableExport({type:'pdf',pdfFontSize:'7',escape:'false'});"> <img src='htmltable_export/icons/pdf.png' width='24px'> PDF</a></li>
								
								
							</ul>
						</span><br/>		<br/>		
  <table class="table table-striped table-condensed table-hover" id="tbl">
      <thead>
      <tr>
      <th>Ref #</th>
      <th>Date</th>
      <th><a href="" ng-click="predicate = 'Dist_Name'; reverse=!reverse">Client Name</a></th>
      <th>Business</th>
<!--<th>1st Vendor <br/>2nd Vendor <br/>3rd Vendor</th>
	  <th>1st PNR <br/> 2nd PNR <br/>3rd PNR</th> 
	  <th>1st NetRt<br/>2nd NetRt<br/>3rd NetRt</th>
	  <th>2nd Vendor</th>
	  <th>2nd NetRt</th>
	  <th>2nd PNR</th> 
	  <th>3rd Vendor</th>
	  <th>3rd NetRt</th>
      <th>3rd PNR</th> -->
	  <th>Vendor</th>
	  <th>PNR</th>
	  <th>NetRt</th>
	  <th>Net Rate</th> 
	   <th>Debit</th>
	   <th>P/L</th>
	   <th>Remarks</th>
      <th><a href="" ng-click="predicate = 'enteredby'; reverse=!reverse">Entered By</a></th>
    </tr>
  </thead>

<tbody>
	<tr ng-repeat="tran in traninvalidmast | filter: name | orderBy:predicate:reverse | startFrom:currentPage*pageSize | limitTo:pageSize">
      <td>{{tran.Referenceno}}</td>
      <td>{{tran.Date |  date:'dd/MM/yyyy'}}</td>
      <td>{{tran.Dist_Name}}</td>
      <td>{{tran.Business}}</td>
      <td>{{tran.vendor1}} <br/> {{tran.vendor2}} <br/> {{tran.vendor3}}</td>
	  <td>{{tran.PNR_Number}} <br/> {{tran.PNR_Number2}} <br/>{{tran.PNR_Number3}} </td> 
	  <td>{{tran.netrate}} <br/> {{tran.netrate2}} <br/> {{tran.netrate3}}</td>
	<!--  <td>{{tran.vendor2}}</td>
      <td>{{tran.netrate2}}</td>
	  <td>{{tran.PNR_Number2}}</td> 
	  <td>{{tran.vendor3}}</td>
	  <td>{{tran.netrate3}}</td>
	  <td>{{tran.PNR_Number3}}</td> -->
	  <td>{{sumeach(tran.netrate , tran.netrate2 , tran.netrate3)}}</td>
      <td>{{tran.Dr_Amount}}</td>
	  <td>{{tran.Dr_Amount - tran.netrate - tran.netrate2 - tran.netrate3 }}</td>
      <td>{{tran.remarks}}</td>
      <td>{{tran.enteredby}}</td>
    </tr>
	<tr>
		<td><h4>Total</h4></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
<!--		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>		!-->	
		<td><h5>Netrate: {{total_nr() | number }}</h5></td>
		<td><h5>Debit: {{total_debit() | number}}</h5></td>
		<td><h5>PL: {{total_pl() | number}}</h5></td>
		<td></td>
		<td></td>
		</tr>
   </tbody>
		 		
  </table>
   <tfoot>
    <tt>Total Records: {{traninvalidmast.length}}</tt>
        Current Page    {{currentPage+1}} of {{Math.ceil(traninvalidmast.length/pageSize)}}
      <td colspan="6">
         <div class="pagination pull-right">
           <ul>
          <!--  <li ng-class="{disabled: currentPage == 0}">
                <a href ng-click="currentPage=currentPage-1">« Prev</a> 
         </li>-->
          <button class="btn btn-info" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1"> « Prev </button>
                    
           <li ng-repeat="n in range(traninvalidmast.length)"
               ng-class="{active: n == currentPage}"
               ng-click="setPage()">
                <a href ng-bind="n + 1">1</a>
           </li> 
           <!--    <li ng-class="{disabled: currentPage >= customermast.length/pageSize - 1 }">
                     <a href ng-click="currentPage=currentPage+1">Next »</a>  -->
    <button class="btn btn-info" ng-disabled="currentPage >= traninvalidmast.length/pageSize - 1" ng-click="currentPage=currentPage+1"> Next » </button>
   </li>
    </ul>
   </div>
   </td>
   </tfoot>      
</body>
</html>
